<template>
    <view class="container2">
        <view class="info-box primary-bg">
            <view>
                <view open-type="getUserInfo" class="avatar">
                    <open-data type='userAvatarUrl' class="userinfo" mode="cover"></open-data>
                </view>
            </view>
            <view>
                <view class="user-info">
                    <view class="username text-white">{{userInfo.userName!=null?userInfo.userName+'('+userInfo.reserved1+')':'未登录'}}</view>
                    <view class="tips-txt" open-type="getPhoneNumber" type="primary">{{userInfo.phone!=null?userInfo.phone:''}}</view>
                </view>
            </view>
        </view>

        <view style="padding: 20px;">
            <view class="container2">
                <view class="card-row">
                    <view class="card">
                        <button open-type="contact"  style="background: #e48902"  class="login-button">
                            <image style="width: 80rpx;height: 80rpx" class="i-icon i-icon-service" src="../../static/icon-service.png" mode="aspectFit"></image>
                            <text style="width: 200rpx;height: 50rpx;margin-top: -42upx;"  class="i-title">联系客服</text>
                            <view class="i-icon i-icon-arrow-r" style="margin-right: 56upx;margin-top: -20upx;">›</view>
                        </button>
                    </view>
                </view>
                <view class="card-row" v-if="userInfo">
                    <view class="card">
                        <button @tap="quitLogin()"  style="background: #00cc9c"  class="login-button">
                            <image style="width: 80rpx;height: 80rpx"  class="i-icon i-icon-service" src="../../static/quit-loogin.png" mode="aspectFit"></image>
                            <text style="width: 200rpx;height: 50rpx;margin-top: -42upx;" class="i-title">退出登录</text>
                            <view class="i-icon i-icon-arrow-r" style="margin-right: 56upx;margin-top: -20upx;">›</view>
                        </button>
                    </view>
                </view>
            </view>
        </view>


        <!--<view class="list-container">-->
            <!--<button open-type="contact" class="primary-bg i-list-item">-->
                <!--<image class="i-icon i-icon-service" src="../../static/icon-service.png" mode="aspectFit"></image>-->
                <!--<text class="i-title">联系客服</text>-->
                <!--<view class="i-icon i-icon-arrow-r" style="margin-right: 56upx;margin-top: -42upx;">›</view>-->
            <!--</button>-->
        <!--</view>-->
        <!--<view v-if="userInfo" class="list-container">-->
            <!--<button @tap="quitLogin()" class="primary-bg i-list-item">-->
                <!--<image class="i-icon i-icon-service" src="../../static/quit-loogin.png" mode="aspectFit"></image>-->
                <!--<text class="i-title">退出登录</text>-->
                <!--<view class="i-icon i-icon-arrow-r" style="margin-right: 56upx;margin-top: -42upx;">›</view>-->
            <!--</button>-->
        <!--</view>-->
    </view>
</template>

<script>

export default {
    onShareAppMessage() {
        return {
            title: '赐丰订单',
            path: '/pages/index/index',
            imageUrl: '/static/ewm.jpg'
        }
    },
    data() {
        return {
            userInfo: null,
        }
    },
    onShow() {
        console.log("-----------------------")
        var that = this
        var userInfo = uni.getStorageSync('userInfo');
        console.log(userInfo)
        if (userInfo && userInfo.value) {
            // 判断缓存是否过期
            var now = new Date().getTime();
            if (now < userInfo.expire) {
                that.userInfo = userInfo.value;
            } else {
                // 缓存过期，清空本地缓存
                that.userInfo = null;
                uni.removeStorageSync('userInfo');
            }
        }else{
            // 缓存过期，清空本地缓存
            that.userInfo = null;
        }
    },
    methods: {
        quitLogin(){
            uni.removeStorageSync('userInfo');
            this.userInfo = null;
            uni.showToast({
                title: '退出成功',
                icon: 'none'
            })
        },
        getPhoneNumber(e) {
            const extraValue = e.currentTarget.dataset.extra;
            // 在这里可以使用 extraValue 进行后续逻辑处理
            console.log(extraValue);
            var that = this
            let phoneCode = e.detail.code
            if (!e.detail.code) {
                uni.showModal({
                    title: '授权失败',
                    content: '您已拒绝获取绑定手机号登录授权，可以使用其他手机号验证登录',
                    cancelText: '知道了',
                    showCancel: false, // 是否显示取消按钮，默认为 true
                    confirmText: '知道了',
                    confirmColor: '#3C9CFFFF',
                    success: res => {
                        if (res.confirm) {
                            uni.removeStorageSync('userInfo');
                            that.userInfo = null;
                            // uni.$u.route('/pages/login/mobile')
                        } else if (res.cancel) {
                            uni.removeStorageSync('userInfo');
                            that.userInfo = null;
                            //console.log('用户点击取消')
                        }
                    }
                })
            } else {
                uni.getUserInfo({
                    provider: 'weixin',
                    success: function (infoRes) {
                        that.userInfo = infoRes.userInfo;
                        uni.login({
                            provider: 'weixin',
                            success: res => {
                                uni.request({
                                    data: {
                                        userName: that.userInfo.nickName,
                                        reserved4: that.userInfo.avatarUrl,
                                        reserved1: extraValue,
                                        phoneCode: phoneCode,
                                        loginCode: res.code
                                    },
                                    method: 'POST',
                                    url: that.bash + '/fApi/wxuser/wxlogin',
                                    success: res => {
                                        if (res.data.code == 200) {
                                            uni.$u.toast('获取成功')
                                            console.log(res.data.data)
                                            // 绑定成功后将手机号存储到本地缓存
                                            var now = new Date().getTime();
                                            var expire = now + 30 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
                                            uni.setStorageSync('userInfo', {
                                                value: res.data.data,
                                                expire: expire
                                            });
                                            that.userInfo = res.data.data;
                                        } else {
                                            uni.removeStorageSync('userInfo');
                                            that.userInfo = null;
                                            uni.$u.toast('获取失败')
                                        }
                                    }
                                })
                            }
                        })
                    }
                });
            }
        }
    }
}
</script>

<style>
    page {
        background: #ffffff;
        color: #090909;
    }
</style>
<style scoped lang="less">
    .container {
        .info-box {
            border-bottom: 2px solid #000000;
            height: 350upx;
            margin: 20upx 0;
            padding-left: 20upx;
            display: flex;
            .avatar {
                margin: 0;
                padding: 0;
                background: none;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-right: 20upx;
                .userinfo{
                    width:100upx;
                    height: 100upx;
                    border-radius: 50%;
                    display:flex;
                    overflow: hidden;
                }
            }
            .user-info {
                height: 80upx;
                display: flex;
                flex-direction: column;
                .username {
                    margin-top: 34upx;
                    margin-bottom: 14upx;
                }
                .tips-txt{
                    font-size: 20upx;
                }
            }
        }

    }
    .info-box {
        border-bottom: 2px solid #000000;
        height: 550 upx;
        margin-top: 20rpx;
        margin: 20 upx 0;
        /*padding-left: 20 upx;*/
        /*display: flex;*/
    }
    .avatar {
        margin: 0;
        padding: 0;
        background: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 20upx;
        .userinfo{
            width:200upx;
            height: 200upx;
            border-radius: 50%;
            display:flex;
            overflow: hidden;
        }
    }
    .user-info {
        height: 180upx;
        display: flex;
        flex-direction: column;
        .username {
            text-align: center;
            margin-top: 34upx;
            margin-bottom: 14upx;
        }
        .tips-txt{
            text-align: center;
            font-size: 20upx;
        }
    }

</style>
<style>
    .container2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .card-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
    }

    .card {
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-button {
        width: 90%;
        height: 90%;
        /*background-color: #000000;*/
        /*color: #ffffff;*/
        border: none;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>